import React from 'react'
import {Modal,Form, message,Select, Steps} from 'antd'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
import { updateOrderActionAsync,LoadOrderActionAsync } from '../../../redux/action/orderAction'
const { Option } = Select;
const { Step } = Steps;
function UpdateOrder(props) {
  const [params,setParams] = React.useState({})
  const [OrderOne,setOrderOne] = React.useState({})
  const handleParams=()=>{
    props.OrderList.map((val,i)=>{
      if(val.key===props.selectedRowKey[0])
      {
        OrderUpdateForm.setFieldsValue(val)
        setOrderOne(val)
      }
      return null
    })
  }
  const [OrderUpdateForm]=Form.useForm()
  React.useEffect(() => {
    handleParams()
  },[props.selectedRowKey])
  return (
    <div>
      <Modal 
        title="处理订单状态" 
        visible={props.visible} 
        onOk={async ()=>{
          let fieldsValue = await OrderUpdateForm.validateFields()
          fieldsValue = {...fieldsValue,...params}
          props.updateOrderActionAsync({...OrderOne,...fieldsValue})
          props.LoadOrderActionAsync()
          props.close()
          message.success('处理成功!')
        }} 
        onCancel={props.close}
        okText='确定'
        cancelText='取消'
        >
        <Form  
          layout="horizontal"
          form={OrderUpdateForm}
          name="OrderUpdateForm"
        >
        <Form.Item
          name="status"
          label="状态"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select style={{ width: '30%' }} onChange={(e)=>{setOrderOne({...OrderOne,status:e})}}>
            <Option value={-1}>未处理</Option>
            <Option value={0}>处理中</Option>
            <Option value={1}>已处理</Option>
          </Select>
        </Form.Item>
        </Form>
        <Steps current={OrderOne.status+1} status="process">
          <Step title="第一步" description="商家还未处理"/>
          <Step title="第二步" description="商家处理中" />
          <Step title="第三步" description="外卖小哥已接单"/>
        </Steps>,
      </Modal>
    </div>
  )
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({
    OrderList:state.orderList
	}),
	{updateOrderActionAsync,LoadOrderActionAsync}
)(UpdateOrder)

